import { SubjectType } from '@/apis';
import { getAreaConfig, getIndustryConfig, getTagTypeConfig } from '@/utils/filterConfig';
import { ComponentType, type FilterMenuProps, type IResult } from 'vc';
import { getContractingLv, type ProtectionProject } from '../apis';

export function useScreen() {
  const PAGE_SIZE = 15;

  const queryData = reactive<ProtectionProject>({
    pageNum: 1,
    pageSize: PAGE_SIZE,
    searchTxt: ''
  });

  const { data } = useRequest(getContractingLv);

  const screen = ref<FilterMenuProps[]>([
    {
      ...getAreaConfig().value,
      submitFn: (val: IResult) => {
        const { lv1, lv2, lv3 } = val;
        queryData.provinceCode = lv1.join();
        queryData.cityCode = lv2.join();
        queryData.countryCode = lv3.join();
      }
    },
    {
      ...getIndustryConfig().value,
      submitFn: (val: IResult) => {
        const { lv1, lv2, lv3 } = val;
        queryData.industryCategoryCodeLv1 = lv1?.join() || '';
        queryData.industryCategoryCodeLv2 = lv2?.join() || '';
        queryData.industryCategoryCodeLv3 = lv3?.join() || '';
      }
    },
    {
      ...getTagTypeConfig(SubjectType.PROFESSIONAL_CONTRACTING).value,
      submitFn: (data: string) => {
        queryData.tagTypeCode = data;
      }
    },
    {
      title: '资质类别',
      component: ComponentType.MULTIPLE,
      options: data || [],
      submitFn: (val: string) => {
        queryData.contractingLv = val;
      }
    },
    {
      title: '到期日期',
      component: ComponentType.DATE,
      type: 'daterange',
      submitFn: (val: Array<string>) => {
        queryData.periodOfValidityExpirationDateStart = val[0] || '';
        queryData.periodOfValidityExpirationDateEnd = val[1] || '';
      }
    }
  ]);

  return {
    PAGE_SIZE,
    queryData,
    screen
  };
}
